<template>
  <div id="controls">
    <!-- 全局静音提示（固定在齿轮左侧） -->
    <div 
      v-if="userRole === 'storyteller' && $store.state.voiceChat && $store.state.voiceChat.permissions.globalMute"
      class="global-mute-banner on"
      title="说书人已开启全员禁音"
    >
      <span class="icon">🔇</span>
      <span class="text">说书人已开启全员禁音</span>
    </div>
    <span
      class="nomlog-summary"
      v-show="session.voteHistory.length && session.sessionId"
      @click="toggleModal('voteHistory')"
      :title="`${session.voteHistory.length} ${$t(
        'voteHistorySummary.recent',
      )} ${
        session.voteHistory.length == 1
          ? $t('voteHistorySummary.nomination')
          : $t('voteHistorySummary.nominations')
      }`"
    >
      <font-awesome-icon icon="book-dead" />
      {{ session.voteHistory.length }}
    </span>
    <span
      class="session"
      :class="{
        spectator: userRole === 'storyteller',
        reconnecting: session.isReconnecting,
      }"
      v-if="session.sessionId"
      @click="leaveSession"
      :title="`${session.playerCount} other players in this session${
        session.ping ? ' (' + session.ping + 'ms latency)' : ''
      }`"
    >
      <font-awesome-icon icon="broadcast-tower" />
      {{ session.playerCount }}
    </span>
    <div class="menu" :class="{ open: grimoire.isMenuOpen }">
      <font-awesome-icon icon="cog" @click="toggleMenu" />
      <ul>
        <li class="tabs" :class="tab">
          <font-awesome-icon icon="book-open" @click="tab = 'grimoire'" />
          <font-awesome-icon icon="broadcast-tower" @click="tab = 'session'" />
          <font-awesome-icon
            icon="users"
            @click="tab = 'players'"
          />
          <font-awesome-icon icon="theater-masks" @click="tab = 'characters'" />
          <font-awesome-icon icon="question" @click="tab = 'help'" />
        </li>

        <template v-if="tab === 'grimoire'">
          <!-- Grimoire -->
          <li class="headline">{{ $t("menu.grimoire") }}</li>
          <li @click="toggleGrimoire" v-if="players.length">
            <template v-if="!grimoire.isPublic">{{ $t("menu.hide") }}</template>
            <template v-if="grimoire.isPublic">{{ $t("menu.show") }}</template>
            <em>[Alt+G]</em>
          </li>
          <li @click="toggleNight" v-if="userRole === 'storyteller'">
            <template v-if="!grimoire.isNight">{{
              $t("menu.switchToNight")
            }}</template>
            <template v-if="grimoire.isNight">{{
              $t("menu.switchToDay")
            }}</template>
            <em>[Alt+S]</em>
          </li>
          <li @click="toggleNightOrder" v-if="players.length">
            {{ $t("menu.nightOrder") }}
            <em>
              <font-awesome-icon
                :icon="[
                  'fas',
                  grimoire.isNightOrder ? 'check-square' : 'square',
                ]"
              />
            </em>
          </li>
          <li v-if="players.length">
            {{ $t("menu.zoom") }}
            <em>
              <font-awesome-icon
                @click="setZoom(grimoire.zoom - 1)"
                icon="search-minus"
              />
              {{ Math.round(100 + grimoire.zoom * 10) }}%
              <font-awesome-icon
                @click="setZoom(grimoire.zoom + 1)"
                icon="search-plus"
              />
            </em>
          </li>
          <li @click="setBackground">
            {{ $t("menu.backgroundImage") }}
            <em><font-awesome-icon icon="image" /></em>
          </li>
          <li @click="toggleStatic">
            {{ $t("menu.disableAnimations") }}
            <em
              ><font-awesome-icon
                :icon="['fas', grimoire.isStatic ? 'check-square' : 'square']"
            /></em>
          </li>
          <li @click="toggleMuted">
            {{ $t("menu.muteSounds") }}
            <em
              ><font-awesome-icon
                :icon="['fas', grimoire.isMuted ? 'volume-mute' : 'volume-up']"
            /></em>
          </li>
        </template>

        <template v-if="tab === 'session'">
          <!-- Session -->
          <li class="headline" v-if="session.sessionId">
            {{ userRole === 'storyteller' ? $t("menu.hosting") : (userRole ? $t("menu.playing") : "连接中...") }}
          </li>
          <li class="headline" v-else>
            {{ $t("menu.liveSession") }}
          </li>
          <template v-if="!session.sessionId">
            <li @click="hostSession">
              {{ $t("menu.hostStoryteller") }}<em>[Alt+H]</em>
            </li>
            <li @click="joinSession">
              {{ $t("menu.joinPlayer") }}<em>[Alt+J]</em>
            </li>
          </template>
          <template v-else>
            <li v-if="session.ping">
              {{
                userRole === 'storyteller'
                  ? $t("menu.delayToPlayers")
                  : $t("menu.delayToHost")
              }}
              <em>{{ session.ping }}ms</em>
            </li>
            <li @click="copySessionUrl">
              {{ $t("menu.copyPlayerLink") }}
              <em><font-awesome-icon icon="copy" /></em>
            </li>
            <li v-if="userRole === 'storyteller'" @click="distributeRoles">
              {{ $t("menu.sendCharacters") }}
              <em><font-awesome-icon icon="theater-masks" /></em>
            </li>
            <li
              v-if="session.voteHistory.length || userRole === 'storyteller'"
              @click="toggleModal('voteHistory')"
            >
              {{ $t("menu.voteHistory") }}<em>[Alt+V]</em>
            </li>
            <li @click="toggleHistoryPanel">
              {{ $t("menu.gameHistory") }}<em>[Alt+H]</em>
            </li>
            <li @click="resetGame">
              {{ $t("menu.resetGame") }}
              <em><font-awesome-icon icon="trash-alt" /></em>
            </li>
            <li @click="leaveSession">
              {{ $t("menu.leaveSession") }}
              <em>{{ session.sessionId }}</em>
            </li>
          </template>
        </template>

        <template v-if="tab === 'players' && userRole === 'storyteller'">
          <!-- Storyteller Settings -->
          <li class="headline">说书人设置</li>
          <li @click="showStorytellerSettings = true">
            设置说书人名称
            <em><font-awesome-icon icon="crown" /></em>
          </li>
          
          <!-- Player Management -->
          <li class="headline">{{ $t("menu.players") }}</li>
          <li @click="addPlayer" v-if="players.length < 20">
            {{ $t("menu.addPlayer") }}<em>[Alt+A]</em>
          </li>
          <li @click="addMultiplePlayers" v-if="players.length < 20">
            添加多个玩家<em><font-awesome-icon icon="plus-circle" /></em>
          </li>
          <li @click="randomizeSeatings" v-if="players.length > 2">
            {{ $t("menu.randomizeSeatings") }}
            <em><font-awesome-icon icon="dice" /></em>
          </li>
          <li @click="clearPlayers" v-if="players.length">
            {{ $t("menu.removeAll") }}
            <em><font-awesome-icon icon="trash-alt" /></em>
          </li>
        </template>

        <template v-if="tab === 'characters'">
          <!-- Characters -->
          <li class="headline">{{ $t("menu.characters") }}</li>
          <li v-if="userRole === 'storyteller'" @click="openScriptBrowser">
            {{ $t("menu.selectEdition") }}
            <em>[Alt+E]</em>
          </li>
          <li
            @click="toggleModal('roles')"
            v-if="userRole === 'storyteller' && players.length > 4"
          >
            {{ $t("menu.chooseAndAssign") }}
            <em>[Alt+C]</em>
          </li>
          <li v-if="userRole === 'storyteller'" @click="toggleModal('fabled')">
            {{ $t("menu.addFabled") }}
            <em><font-awesome-icon icon="dragon" /></em>
          </li>
          <li @click="clearRoles" v-if="players.length">
            {{ $t("menu.removeAllRoles") }}
            <em><font-awesome-icon icon="trash-alt" /></em>
          </li>
        </template>

        <template v-if="tab === 'help'">
          <!-- Help -->
          <li class="headline">{{ $t("menu.help") }}</li>
          <li @click="toggleLanguage">
            {{ $t("language.switch") }}
            <em>{{
              currentLanguage === "zh-CN"
                ? $t("language.chinese")
                : $t("language.english")
            }}</em>
          </li>
          <li @click="toggleModal('reference')">
            {{ $t("menu.referenceSheet") }}
            <em>[Alt+R]</em>
          </li>
          <li @click="toggleModal('nightOrder')">
            {{ $t("menu.nightOrderSheet") }}
            <em>[Alt+N]</em>
          </li>
          <li @click="toggleModal('gameState')">
            {{ $t("menu.gameStateJSON") }}
            <em><font-awesome-icon icon="file-code" /></em>
          </li>
          <li>
            <a href="https://discord.gg/Gd7ybwWbFk" target="_blank">
              {{ $t("menu.joinDiscord") }}
            </a>
            <em>
              <a href="https://discord.gg/Gd7ybwWbFk" target="_blank">
                <font-awesome-icon :icon="['fab', 'discord']" />
              </a>
            </em>
          </li>
          <li>
            <a href="https://github.com/bra1n/townsquare" target="_blank">
              {{ $t("menu.sourceCode") }}
            </a>
            <em>
              <a href="https://github.com/bra1n/townsquare" target="_blank">
                <font-awesome-icon :icon="['fab', 'github']" />
              </a>
            </em>
          </li>

        </template>
      </ul>
    </div>
    <ResetGameModal
      v-if="showResetModal"
      @close="showResetModal = false"
      @confirm="handleResetConfirm"
    />
    <StorytellerSettingsModal
      v-if="showStorytellerSettings"
      @close="showStorytellerSettings = false"
      @settings-updated="handleStorytellerSettingsUpdated"
    />
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import i18n from "../i18n";
import ResetGameModal from "./modals/ResetGameModal.vue";
import StorytellerSettingsModal from "./modals/StorytellerSettingsModal.vue";

export default {
  components: {
    ResetGameModal,
    StorytellerSettingsModal,
  },
  computed: {
    ...mapState(["grimoire", "session", "edition", "roles", "history"]),
    ...mapState("players", ["players"]),
    ...mapState("voiceChat", ["users"]),
    currentLanguage() {
      return i18n.getCurrentLanguage();
    },
    hasCustomImages() {
      // 检查当前角色中是否有自定义图片
      return Array.from(this.roles.values()).some(
        (role) => role.image && role.image.trim() !== "",
      );
    },
    // 直接获取当前用户角色（仅使用服务器数据）
    userRole() {
      const serverRole = this.users?.get(this.session.playerId)?.role;
      return serverRole || null; // 没有服务器数据时返回null
    },
  },
  data() {
    return {
      tab: "grimoire",
      showResetModal: false,
      showStorytellerSettings: false,
    };
  },
  methods: {
    $t(key, params = {}) {
      return i18n.t(key, params);
    },

    setBackground() {
      const background = prompt(this.$t("prompts.enterBackgroundUrl"));
      if (background || background === "") {
        this.$store.commit("setBackground", background);
      }
    },
    hostSession() {
      console.log("🎯 hostSession被调用，当前sessionId:", this.session.sessionId);
      if (this.session.sessionId) {
        console.log("❌ 已存在sessionId，hostSession直接返回");
        return;
      }
      const sessionId = prompt(
        this.$t("prompts.enterSessionName"),
        Math.round(Math.random() * 10000),
      );
      console.log("🎯 用户输入的sessionId:", sessionId);
      if (sessionId) {
        console.log("✅ sessionId有效，开始创建房间流程");
        // 使用新的角色管理函数
        const { createGame } = require("../utils/userStorage");
        createGame(sessionId);

        this.$store.commit("session/clearVoteHistory");
        // 先清除现有会话，确保不会触发socket.js中的自动设置逻辑
        // this.$store.commit("session/setSessionId", ""); // 暂时注释，避免断开后续连接
        // 清除旧的playerId，确保会重新生成
        this.$store.commit("session/setPlayerId", "");
        console.log("🔧 清除旧的playerId，当前playerId:", this.$store.state.session.playerId);
        
        // 强制断开现有WebSocket连接，确保重建
        if (this.$store.state.session.socket) {
          console.log("🔧 发现现有WebSocket连接，强制断开");
          this.$store.state.session.socket.close();
          this.$store.state.session.socket = null;
        }
        
        // 先更新URL hash，确保WebSocket连接时能正确读取
        const currentUrl = window.location.href.split("#")[0];
        const newUrl = currentUrl + "#" + sessionId;
        console.log("🌐 准备更新URL（在设置sessionId之前）:", {
          currentUrl: currentUrl,
          sessionId: sessionId,
          newUrl: newUrl,
          currentLocation: window.location.href
        });
        
        window.history.pushState(null, "", newUrl);
        console.log("🌐 URL更新完成:", {
          expectedUrl: newUrl,
          actualUrl: window.location.href,
          hash: window.location.hash
        });
        
        // 直接设置sessionId，角色由服务器确定
        this.$nextTick(() => {
          console.log("设置说书人会话，等待服务器角色数据");
          
          // 然后设置sessionId，这将触发WebSocket连接
          console.log("🎯 开始设置sessionId:", sessionId);
          this.$store.commit("session/setSessionId", sessionId);
          console.log("🎯 sessionId设置完成，当前store中的值:", this.$store.state.session.sessionId);
          
          // 检查WebSocket连接状态
          console.log("🔍 检查WebSocket连接状态:", {
            socketExists: !!this.$store.state.session.socket,
            socketReadyState: this.$store.state.session.socket ? this.$store.state.session.socket.readyState : 'N/A',
            playerId: this.$store.state.session.playerId,
            serverUserRole: this.$store.state.voiceChat.users?.get(this.$store.state.session.playerId)?.role || '服务器数据未到达',
            computedUserRole: this.userRole || 'null'
          });
          
          // 如果连接不存在，等待一下再检查
          setTimeout(() => {
            console.log("🔍 延迟检查WebSocket连接状态:", {
              socketExists: !!this.$store.state.session.socket,
              socketReadyState: this.$store.state.session.socket ? this.$store.state.session.socket.readyState : 'N/A'
            });
          }, 1000);

          // 设置hash角色标志位
          const {
            setHashRoleFlag,
            setStorytellerUserId,
          } = require("../utils/userStorage");
          setHashRoleFlag(sessionId, "storyteller");

          // 设置说书人用户ID
          setStorytellerUserId();

          this.copySessionUrl();
        });
      }
    },
    async copySessionUrl() {
      const url = window.location.href.split("#")[0];
      const link = url + "#" + this.session.sessionId;

      try {
        // 尝试使用现代剪贴板API
        await navigator.clipboard.writeText(link);
        console.log("链接已复制到剪贴板:", link);
      } catch (error) {
        console.warn("现代剪贴板API失败，尝试备用方法:", error);

        // 备用方法：使用传统的document.execCommand
        const textArea = document.createElement("textarea");
        textArea.value = link;
        textArea.style.position = "fixed";
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
          const successful = document.execCommand("copy");
          if (successful) {
            console.log("链接已复制到剪贴板（备用方法）:", link);
          } else {
            console.error("复制失败");
            alert("复制失败，请手动复制链接：" + link);
          }
        } catch (err) {
          console.error("备用复制方法也失败:", err);
          alert("复制失败，请手动复制链接：" + link);
        } finally {
          document.body.removeChild(textArea);
        }
      }
    },
    distributeRoles() {
      if (this.userRole !== 'storyteller') return;

      // 检查是否有玩家
      if (this.players.length === 0) {
        alert("没有玩家可以发送角色！请先添加玩家。");
        return;
      }

      // 检查是否有玩家有角色
      const playersWithRoles = this.players.filter(
        (player) => player.role && player.role.id,
      );
      if (playersWithRoles.length === 0) {
        alert("没有玩家分配了角色！请先分配角色。");
        return;
      }

      // 检查是否有玩家有ID（已认领座位）
      const playersWithId = this.players.filter((player) => player.id);
      if (playersWithId.length === 0) {
        alert("没有玩家认领座位！玩家需要先认领座位才能接收角色。");
        return;
      }

      const popup = this.$t("prompts.distributeCharacters");
      if (confirm(popup)) {
        console.log("Distributing roles to players:", {
          totalPlayers: this.players.length,
          playersWithRoles: playersWithRoles.length,
          playersWithId: playersWithId.length,
        });

        this.$store.commit("session/distributeRoles", true);
        setTimeout(
          (() => {
            this.$store.commit("session/distributeRoles", false);
          }).bind(this),
          2000,
        );
      }
    },
    imageOptIn() {
      this.toggleImageOptIn();
    },
    resetGame() {
      this.openResetModal();
    },
    openResetModal() {
      this.showResetModal = true;
    },
    handleResetConfirm(options) {
      // 说书人和玩家分别处理重置逻辑
      if (this.userRole === 'storyteller') {
        // 说书人重置（同步所有玩家）
        this.resetAllGameWithOptions(options);
      } else {
        // 玩家本地重置
        this.resetPlayerGameWithOptions(options);
      }
    },
    resetAllGameWithOptions(options) {
      // 说书人重置：先执行本地重置，再发送网络消息
      console.log("说书人执行重置，选项:", options);

      // 先执行本地重置
      this.resetPlayerGameWithOptions(options);

      // 再发送socket消息给所有玩家
      if (this.$store.state.socket) {
        console.log("发送重置消息给所有玩家");
        this.$store.state.socket.sendReset("all", options);
      } else {
        console.log("Socket实例不存在，无法发送重置消息");
      }
    },
    resetPlayerGameWithOptions(options) {
      // 本地重置所有玩家数据，根据options
      const players = this.players;
      if (options.roles) {
        players.forEach((player) => {
          this.$store.commit("players/update", {
            player,
            property: "role",
            value: { id: null, name: null },
          });
        });
      }
      if (options.bluffs) {
        this.$store.commit("players/setBluff", {});
      }
      if (options.reminders) {
        players.forEach((player) => {
          this.$store.commit("players/update", {
            player,
            property: "reminders",
            value: [],
          });
        });
      }
      if (options.deathStatus) {
        players.forEach((player) => {
          this.$store.commit("players/update", {
            player,
            property: "isDead",
            value: false,
          });
        });
      }
      if (options.nominationStatus) {
        players.forEach((player) => {
          this.$store.commit("players/update", {
            player,
            property: "isNominated",
            value: false,
          });
        });
      }
      if (options.aliveStatus) {
        players.forEach((player) => {
          this.$store.commit("players/update", {
            player,
            property: "isDead",
            value: false,
          });
        });
      }
      if (options.gameHistory) {
        this.$store.commit("clearHistory");
      }
      if (options.voteSettings) {
        this.$store.commit("session/clearVoteHistory");
      }
      if (options.nightSettings) {
        // 可根据实际夜晚状态重置逻辑补充
        this.$store.commit("toggleNight", false);
      }
      if (options.markerSettings) {
        this.$store.commit("session/setMarkedPlayer", -1);
      }
    },
    joinSession() {
      if (this.session.sessionId) return this.leaveSession();
      let sessionId = prompt(this.$t("prompts.enterJoinSession"));
      if (sessionId.match(/^https?:\/\//i)) {
        sessionId = sessionId.split("#").pop();
      }
      if (sessionId) {
        // 使用新的角色管理函数
        const { joinGame } = require("../utils/userStorage");
        joinGame(sessionId);

        this.$store.commit("session/clearVoteHistory");
        this.$store.commit("toggleGrimoire", false);
        this.$store.commit("session/setSessionId", sessionId);

        // 更新URL hash，设置为访客模式
        this.$nextTick(() => {
          const currentUrl = window.location.href.split("#")[0];
          const newUrl = currentUrl + "#" + sessionId;
          window.history.pushState(null, "", newUrl);
          console.log("访客加入对局，更新URL hash:", newUrl);

          // 设置hash角色标志位为访客
          const { setHashRoleFlag } = require("../utils/userStorage");
          setHashRoleFlag(sessionId, "spectator");
        });
      }
    },
    leaveSession() {
      if (confirm(this.$t("confirm.leaveActiveGame"))) {
        // 使用新的角色管理函数
        const { leaveGame } = require("../utils/userStorage");
        leaveGame();

        const sessionId = this.session.sessionId;
        this.$store.commit("session/setSpectator", false); // 离开后重置为玩家状态
        this.$store.commit("session/setSessionId", "");

        // 清除hash角色标志位
        if (sessionId) {
          const { clearHashRoleFlag } = require("../utils/userStorage");
          clearHashRoleFlag(sessionId);
        }
      }
    },
    addPlayer() {
      if (this.userRole !== 'storyteller') return;
      if (this.players.length >= 20) return;
      const name = prompt(this.$t("prompts.playerName"));
      if (name) {
        this.$store.commit("players/add", name);
      }
    },
    addMultiplePlayers() {
      if (this.userRole !== 'storyteller') return;
      if (this.players.length >= 20) {
        alert("已达到最大玩家数量限制（20人）！");
        return;
      }
      
      const maxCanAdd = 20 - this.players.length;
      const count = prompt(`批量添加玩家\n\n当前玩家数：${this.players.length}/20\n最多可添加：${maxCanAdd} 个\n\n请输入要添加的玩家数量:`);
      
      if (count === null || count.trim() === "") return; // 用户取消或输入为空
      
      const numPlayers = parseInt(count.trim());
      
      // 验证输入
      if (isNaN(numPlayers) || numPlayers <= 0) {
        alert("❌ 请输入有效的正整数！");
        return;
      }
      
      if (numPlayers > maxCanAdd) {
        alert(`❌ 超出限制！\n\n最多只能添加 ${maxCanAdd} 个玩家\n当前已有 ${this.players.length} 个玩家\n系统限制最大 20 个玩家`);
        return;
      }
      
      // 确认添加
      if (!confirm(`确认添加 ${numPlayers} 个玩家吗？\n\n玩家将被命名为："玩家 ${this.players.length + 1}" 到 "玩家 ${this.players.length + numPlayers}"`)) {
        return;
      }
      
      // 批量添加玩家
      const startingPlayerCount = this.players.length;
      for (let i = 1; i <= numPlayers; i++) {
        const playerName = `玩家 ${startingPlayerCount + i}`;
        this.$store.commit("players/add", playerName);
      }
      
      // 成功提示（仅控制台记录）
      console.log(`✅ 批量添加玩家完成: ${numPlayers} 个，当前总数: ${this.players.length}`);
    },
    randomizeSeatings() {
      if (this.userRole !== 'storyteller') return;
      if (confirm(this.$t("confirm.randomizeSeatings"))) {
        this.$store.dispatch("players/randomize");
      }
    },
    clearPlayers() {
      if (this.userRole !== 'storyteller') return;
      if (confirm(this.$t("confirm.removeAllPlayers"))) {
        // abort vote if in progress
        if (this.session.nomination) {
          this.$store.commit("session/nomination");
        }
        this.$store.commit("players/clear");
      }
    },
    clearRoles() {
      if (confirm(this.$t("confirm.removeAllRoles"))) {
        this.$store.dispatch("players/clearRoles");
      }
    },
    toggleHistoryPanel() {
      this.$parent.showHistoryPanel = !this.$parent.showHistoryPanel;
    },

    openScriptBrowser() {
      this.$parent.showScriptBrowser = true;
    },
    toggleNight() {
      console.log(`🎮 toggleNight: 当前状态 isNight=${this.grimoire.isNight}, currentRound=${this.history.currentRound}`);
      this.$store.commit("toggleNight");
      
      if (this.grimoire.isNight) {
        console.log(`🌙 切换到夜晚模式`);
        this.$store.commit("session/setMarkedPlayer", -1);

        // 设置夜晚阶段 - 这会自动处理轮次递增
        this.$store.commit("setCurrentPhase", "night");

        // 使用$nextTick确保轮次更新后再记录历史
        this.$nextTick(() => {
          console.log(`📝 记录夜晚历史: round=${this.history.currentRound}`);
          this.$store.commit("addHistoryEvent", {
            action: "phase_change",
            summary: "切换到夜晚阶段",
            details: "说书人开始夜晚操作",
            phase: "night",
            round: this.history.currentRound,
            isPublic: false,
          });
        });
      } else {
        console.log(`☀️ 切换到白天模式`);
        // 设置白天阶段 - 这会自动处理轮次递增
        this.$store.commit("setCurrentPhase", "day");

        // 使用$nextTick确保轮次更新后再记录历史
        this.$nextTick(() => {
          console.log(`📝 记录白天历史: round=${this.history.currentRound}`);
          this.$store.commit("addHistoryEvent", {
            action: "phase_change",
            summary: "切换到白天阶段",
            details: "夜晚结束，开始白天讨论",
            phase: "day",
            round: this.history.currentRound,
            isPublic: false,
          });
        });
      }
    },
    toggleLanguage() {
      const newLocale = this.currentLanguage === "zh-CN" ? "en-US" : "zh-CN";
      i18n.setLanguage(newLocale);
    },
    ...mapMutations([
      "toggleGrimoire",
      "toggleMenu",
      "toggleImageOptIn",
      "toggleMuted",
      "toggleNightOrder",
      "toggleStatic",
      "setZoom",
      "toggleModal",
      "setLocale",
    ]),
    
    // 处理说书人设置更新
    handleStorytellerSettingsUpdated(settings) {
      console.log('📝 说书人设置已更新:', settings);
      // 设置已经保存到localStorage，其他组件会自动读取
    },
  },
};
</script>

<style scoped lang="scss">
@import "../vars.scss";

// success animation
@keyframes greenToWhite {
  from {
    color: green;
  }
  to {
    color: white;
  }
}

// Controls
#controls {
  position: absolute;
  right: 3px;
  top: 3px;
  text-align: right;
  padding-right: 50px;
  z-index: 75;

  .global-mute-banner {
    position: absolute;
    right: 110px; // 向左移，避开齿轮与会话图标
    top: 6px;
    background: rgba(244, 67, 54, 0.16);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #ff8a80;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none; // 不遮挡点击
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    display: inline-flex;
    align-items: center;
    gap: 6px; // 横向排列图标与文本

    .icon { flex-shrink: 0; }
    .text { white-space: nowrap; }

    &.on { /* 全局静音中：红色 */ }
    &:not(.on) {
      background: rgba(76, 175, 80, 0.16);
      border-color: rgba(76, 175, 80, 0.4);
      color: #a5d6a7;
    }
  }

  svg {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
    &.success {
      animation: greenToWhite 1s normal forwards;
      animation-iteration-count: 1;
    }
  }

  > span {
    display: inline-block;
    cursor: pointer;
    z-index: 5;
    margin-top: 7px;
    margin-left: 10px;
  }

  span.nomlog-summary {
    color: $townsfolk;
  }

  span.session {
    color: $demon;
    &.spectator {
      color: $townsfolk;
    }
    &.reconnecting {
      animation: blink 1s infinite;
    }
  }
}

@keyframes blink {
  50% {
    opacity: 0.5;
    color: gray;
  }
}

.menu {
  width: 220px;
  transform-origin: 200px 22px;
  transition: transform 600ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: rotate(-90deg);
  position: absolute;
  right: 0;
  top: 0;

  &.open {
    transform: rotate(0deg);
  }

  > svg {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid black;
    width: 40px;
    height: 50px;
    margin-bottom: -8px;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: 5px 5px 15px;
  }

  a {
    color: white;
    text-decoration: none;
    &:hover {
      color: red;
    }
  }

  ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 10px black;
    border: 3px solid black;
    border-radius: 10px 0 10px 10px;

    li {
      padding: 2px 5px;
      color: white;
      text-align: left;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 30px;

      &.tabs {
        display: flex;
        padding: 0;
        svg {
          flex-grow: 1;
          flex-shrink: 0;
          height: 35px;
          border-bottom: 3px solid black;
          border-right: 3px solid black;
          padding: 5px 0;
          cursor: pointer;
          transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
          &:hover {
            color: red;
            transform: scale(1.1);
          }
          &:last-child {
            border-right: 0;
          }
        }
        &.grimoire .fa-book-open,
        &.players .fa-users,
        &.characters .fa-theater-masks,
        &.session .fa-broadcast-tower,
        &.help .fa-question {
          background: linear-gradient(
            to bottom,
            $townsfolk 0%,
            rgba(0, 0, 0, 0.5) 100%
          );
        }
      }

      &:not(.headline):not(.tabs):hover {
        cursor: pointer;
        color: red;
      }

      em {
        flex-grow: 0;
        font-style: normal;
        margin-left: 10px;
        font-size: 80%;
      }

      .custom-images-notice {
        color: #90ee90;
        font-size: 70%;
        margin-top: 2px;
        font-style: italic;
      }
    }

    .headline {
      font-family: PiratesBay, sans-serif;
      letter-spacing: 1px;
      padding: 0 10px;
      text-align: center;
      justify-content: center;
      background: linear-gradient(
        to right,
        $townsfolk 0%,
        rgba(0, 0, 0, 0.5) 20%,
        rgba(0, 0, 0, 0.5) 80%,
        $demon 100%
      );
    }
  }
}
</style>
